import "./index.less"
import { Input, Button, Spin, message,Pagination,TablePaginationConfig,Empty } from 'antd';

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import React, { useState, useEffect, useRef } from 'react'

import { getSugList,Sug } from "@/api/active";
import systme from "@/api/constant"
import { useNavigate, useLocation } from "react-router-dom";

const { TextArea } = Input;
let userName = JSON.parse(sessionStorage.getItem("user") as string).userName
let userId = JSON.parse(sessionStorage.getItem("user") as string).id

let searchValue = {
    activityId: '',
    pageIndex: 1,
    pageSize: 10,
}
let sugData = {
    activityId: '',
    content:'',
    userId,
    userName,
}


export default function activeInfo() {
    const initClearDate = ()=>{
        searchValue = {
            activityId: '',
            pageIndex: 1,
            pageSize: 10,
       }
       sugData = {
        activityId: '',
        content:'',
        userId,
        userName,
      }
      setTextValue('')
      searchValue.activityId = state.id
      sugData.activityId =state.id
   }

    let { state } = useLocation()
    const [data, setData] = useState<any>([])
    const initsugList = () => {
        setLoading(true)
        getSugList(searchValue).then((res) => {
            if (res.code == 200) {
                setData(res.data.list)
                setConfig({ ...saveValue.current, total: res.data.total })
                setLoading(false)
            } else {
                message.error(res.msg || systme.ERROR_MESSAGE)
                setLoading(false)
            }
        }).catch(() => {
            message.error(systme.ERROR_MESSAGE)
        })
    }
    const [loading, setLoading] = useState<boolean>(false)

    useEffect(() => {
        initClearDate()
        initsugList()
    }, [])
    
    const handlerSug = ()=>{
        Sug(sugData).then((res)=>{
            if(res.code == 200){
                message.success("评论成功")
                setTextValue('')
                searchValue.pageIndex = 1
                initsugList()
            }else{
                message.error(res.msg||"评论失败")
            }
        }).catch(err => {
            message.error( systme.ERROR_MESSAGE)
        })
    }
    const handlerChange = (e:any)=>{
         sugData.content = e.target.value
         setTextValue(e.target.value)
    }
    const [textValue,setTextValue] = useState<string>('')
    const PageChange = (page: number, pageSize: number) => {
        searchValue.pageIndex = page
        searchValue.pageSize = pageSize
        setLoading(true)
        setConfig({ ...saveValue.current, pageSize, current: page })
        initsugList()
    }
    let pageConfig: TablePaginationConfig = {
        position: ['bottomCenter'],
        total: 0,
        showTotal: (total: number) => `共 ${total} 条`,
        pageSizeOptions: [10, 20, 30, 40, 50],
        showSizeChanger: true,
        showQuickJumper: true,
        onChange: PageChange,
        pageSize: 10,
        current: 1

    }
    let [config, setConfig] = useState((pageConfig))
    let saveValue = useRef<TablePaginationConfig>()
    useEffect(() => {
        //储存数据
        saveValue.current = config
    }, [config])
    

    return (
        <div className="box_views">
            <div className="html_views" dangerouslySetInnerHTML={{ __html: state.content }} >
            </div>
            <div className="sug_views">
                <div className="sug_header">
                    <div className="sug_title flex_a" >评论区</div>
                    <div className="addSug">
                        <TextArea rows={4} placeholder="请输入您的评论" value={textValue} onChange={(e)=>{handlerChange(e)}} />
                        <Button type="primary" style={{ marginTop: '10px' }} onClick={handlerSug} disabled={textValue.length == 0} >发表</Button>
                    </div>
                </div>
                <Spin spinning={loading} >
                   {
                  data.length !=0 && <div className="sug_listsug_list">
                     {data.map((item: any) => {
                         return (
                             <div className="sug_item flex">
                                 <div className="user_box flex">
                                     {item.userName}：
                                 </div>
                                 <div className="sug_content flex_c">
                                     <div className="content">
                                         {item.content}
                                     </div>
                                     <div className="date">
                                        评论于{item.sugTime.slice(0,10)}
                                     </div>
                                 </div>
                             </div>
                         )
                     })}
                 </div>
                   }
                     {
                          data.length ==0 && <Empty description={'暂无客户评论，快去评论吧'} />
                     }
                </Spin>
            </div>
            <div className="page">
               <Pagination {...config}  />
            </div>
        </div>
    )
}